<template>
  <view class="artist-profile">
   

    
    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 艺术家信息卡片 -->
      <view class="artist-card">
        <!-- 轮播图（首图+文字同轮播） -->
        <swiper 
          class="artist-swiper" 
          :autoplay="true" 
          :interval="4000" 
          :duration="500" 
          :circular="true"
          :indicator-dots="false"
        >
          <swiper-item v-for="(slide, idx) in heroSlides" :key="idx">
            <view class="slide-content" @click="onHeroClick">
              <image class="artist-slide-image" :src="slide.image" mode="aspectFit" />
            </view>
          </swiper-item>
        </swiper>
      </view>

      <!-- 标签区域 -->
      <view class="tags-section">
        <view class="tag">明信片图鉴</view>
        <view class="tag">淡彩插画</view>
        <view class="tag">钢笔线描风格</view>
      </view>

      <!-- 作品展示网格 -->
      <view class="works-grid">
        <view class="work-item" v-for="(work, index) in works" :key="index" @click="viewWork(work)">
          <view class="work-image">
            <image class="work-image-src" :src="work.image" mode="aspectFill" />
          </view>
        </view>
      </view>
    </view>

    <!-- 自定义底部导航栏 -->
    <CustomTabBar :currentIndex="0" />

    <!-- 静默登录组件 -->
    <SilentLogin 
      :auto-login="false"
      :prefer-prompt="true"
      :delay-show="0"
      @login-success="onLoginSuccess"
      @login-cancel="onLoginCancel"
    />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import SilentLogin from '@/components/SilentLogin.vue'
import CustomTabBar from '@/components/CustomTabBar.vue'
import { useUserStore } from '@/stores/user.js'
import { useCreationStore } from '@/stores/creation.js'

// 使用Pinia stores
const userStore = useUserStore()
const creationStore = useCreationStore()


// 作品数据
const works = ref([
  { id: 1, title: '作品1', image: '/static/c2.png' },
  { id: 2, title: '作品2', image: '/static/c3.png' },
  { id: 3, title: '作品3', image: '/static/c4.png' },
  { id: 4, title: '作品4', image: '/static/c5.png' },
  { id: 5, title: '作品5', image: '/static/c6.png' },
  { id: 6, title: '作品6', image: '/static/c7.png' }
])

// 首屏轮播图（图片+文案同步切换）
const heroSlides = ref([
  { image: '/static/首页穆夏.png' },
  { image: '/static/首页穆夏.png' },
  { image: '/static/首页穆夏.png' }
])

// 方法
function onHeroClick() {
  uni.navigateTo({ url: '/pages/image-import/image-import-selection' })
}

function viewWork(work) {
  console.log('查看作品:', work)
  // 可以跳转到作品详情页
  uni.showToast({
    title: `查看${work.title}`,
    icon: 'none'
  })
}


function onLoginSuccess(userInfo) {
  console.log('登录成功:', userInfo)
  userStore.setUserInfo(userInfo)
}

function onLoginCancel() {
  console.log('用户取消登录')
}

// 页面加载
onMounted(() => {
  console.log('艺术家档案页面已加载')
  // 监听新建展览事件，提示用户到足迹查看
  uni.$off('exhibitionSaved', handleNewExhibitionFromElsewhere)
  uni.$on('exhibitionSaved', handleNewExhibitionFromElsewhere)
})

function handleNewExhibitionFromElsewhere(newRecord) {
  console.log('📣 [创作中心] 收到新建展览事件（来自其他页面）:', newRecord)
  uni.showToast({ title: '展览已创建，可到“足迹”查看', icon: 'none' })
}
</script>

<style scoped>
.artist-profile {
  width: 100vw;
  height: 100vh;
  background-color: #0f0f10;
  position: relative;
  overflow: hidden;
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
}

/* 状态栏 */
.status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 21px;
  z-index: 10;
}

.time {
  font-size: 15px;
  font-weight: 600;
  color: #000000;
  letter-spacing: -0.3px;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.signal, .wifi, .battery {
  width: 17px;
  height: 11px;
  background-color: #000000;
  border-radius: 1px;
}

.battery {
  width: 24px;
  height: 11px;
  border: 1px solid #000000;
  border-radius: 2.67px;
  position: relative;
}

.battery::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 2px;
  width: 1px;
  height: 7px;
  background-color: #000000;
  border-radius: 0 1px 1px 0;
}

/* 顶部导航栏 */
.top-bar {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  z-index: 9;
}

.title {
  font-size: 17px;
  font-weight: 400;
  color: #000000;
  text-align: center;
}

/* 主要内容区域 */
.main-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 83px;
  padding: 0px 12px 0px 12px;
  overflow-y: auto;
}

/* 艺术家信息卡片 */
.artist-card {
  background: transparent;
  border-radius: 13px;
  margin-bottom: 16px;
  margin-top: 0;
  position: relative;
  box-shadow: none;
  overflow: visible;
}

.artist-swiper {
  width: 100%;
  height: 100vh;
  border-radius: 0;
  overflow: hidden;
}

.slide-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
}

.artist-slide-image { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.slide-caption { display: none; }

.artist-info {
  margin-top: 12px;
  padding: 0 4px;
  text-align: left;
}

.artist-name {
  font-family: 'Fugaz One', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: block;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.artist-title {
  font-family: 'Fugaz One', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
  display: block;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.action-button {
  margin-top: 12px;
}

.create-same-btn {
  width: 100%;
  height: 40px;
  background: linear-gradient(135deg, #ff0050, #ff4081);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Fugaz One', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.create-same-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(255, 0, 80, 0.3);
}

/* 分页指示器 */
.pagination-dots {
  position: absolute;
  bottom: 60px;
  right: 16px;
  display: flex;
  gap: 7px;
}

.dot {
  width: 20px;
  height: 3px;
  background-color: #ffffff;
  border-radius: 12px;
  transition: width 0.3s ease;
}

.dot.active {
  width: 20px;
}

.dot:not(.active) {
  width: 7px;
}

/* 标签区域 */
.tags-section {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tag {
  background: #1c1c1e;
  color: #eaeaea;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  font-family: 'Fugaz One', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  box-shadow: none;
}

/* 作品展示网格 */
.works-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
    margin-bottom: 20px;
}

.work-item {
  aspect-ratio: 1;
  background-color: #18181a;
  border-radius: 13px;
  overflow: hidden;
      position: relative;
  cursor: pointer;
      transition: all 0.3s ease;
  box-shadow: none;
}

.work-item:active {
  transform: scale(0.95);
}

.work-image {
      width: 100%;
  height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
}

.work-image-src {
      width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 响应式设计 */
@media (max-width: 375px) {
  .artist-profile {
    width: 100vw;
  }
}

/* 滚动条样式 */
.main-content::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

/* 轮播指示点右对齐（覆盖uni-app默认样式） */
:deep(.uni-swiper__dots-box) {
  justify-content: flex-end !important;
  padding-right: 12px;
}

:deep(.uni-swiper__dots) {
  right: 12px !important;
  left: auto !important;
}

:deep(.uni-swiper-dots) {
  text-align: right !important;
  padding-right: 12px;
}

/* 动画效果 */
.artist-card {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.work-item {
  animation: fadeInScale 0.4s ease-out;
  animation-fill-mode: both;
}

.work-item:nth-child(1) { animation-delay: 0.1s; }
.work-item:nth-child(2) { animation-delay: 0.2s; }
.work-item:nth-child(3) { animation-delay: 0.3s; }
.work-item:nth-child(4) { animation-delay: 0.4s; }
.work-item:nth-child(5) { animation-delay: 0.5s; }
.work-item:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>
